<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>主页</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Helvetica Neue', 'Microsoft YaHei', sans-serif;
    }

    body {
      background: linear-gradient(135deg, #F5F7FA 0%, #E8F4FD 100%);
      color: #333333;
      min-height: 100vh;
      padding-bottom: 100px;
      line-height: 1.6;
    }

    /* 顶部导航栏 */
    .header {
      background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
      color: white;
      padding: 20px;
      position: relative;
      min-height: 80px;
      display: flex;
      align-items: center;
      box-shadow: 0 4px 20px rgba(33, 150, 243, 0.3);
    }

    .welcome-text {
      font-size: 15px;
      opacity: 0.9;
      margin-bottom: 8px;
      font-weight: 300;
    }

    .user-name {
      font-size: 20px;
      font-weight: 600;
      letter-spacing: 0.5px;
    }

    .menu-btn {
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: white;
      font-size: 16px;
      cursor: pointer;
      display: flex;
      align-items: center;
      padding: 10px 15px;
      border-radius: 25px;
      transition: all 0.3s ease;
      backdrop-filter: blur(10px);
    }

    .menu-btn:hover {
      background: rgba(255, 255, 255, 0.2);
      transform: translateY(-50%) scale(1.05);
    }

    .avatar {
      width: 45px;
      height: 45px;
      border-radius: 50%;
      background: linear-gradient(135deg, #FFD600 0%, #FFC107 100%);
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 12px;
      color: #2196F3;
      font-weight: bold;
      font-size: 18px;
      box-shadow: 0 4px 15px rgba(255, 214, 0, 0.4);
      border: 2px solid rgba(255, 255, 255, 0.3);
    }

    /* 导航标签 */
    .nav-tabs {
      display: flex;
      background-color: white;
      padding: 0;
      border-bottom: 1px solid #E0E0E0;
      margin: 0;
      justify-content: space-around;
      width: 100%;
    }

    .nav-tab {
      padding: 18px 12px;
      font-size: 15px;
      color: #757575;
      text-decoration: none;
      position: relative;
      flex: 1;
      text-align: center;
      transition: all 0.3s ease;
      font-weight: 500;
      white-space: nowrap;
    }

    .nav-tab:hover {
      color: #2196F3;
      background-color: rgba(33, 150, 243, 0.05);
    }

    .nav-tab.active {
      color: #2196F3;
      font-weight: 600;
      background-color: rgba(33, 150, 243, 0.08);
    }

    .nav-tab.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 60%;
      height: 3px;
      background: linear-gradient(90deg, #2196F3, #1976D2);
      border-radius: 3px 3px 0 0;
    }

    /* 内容区域 */
    .content-container {
      background-color: white;
      margin-top: 20px !important;
      margin-left: 15px;
      margin-right: 15px;
      margin-bottom: 20px;
      border-radius: 12px;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
      overflow: hidden;
      border: 1px solid rgba(0, 0, 0, 0.05);
    }

    /* 页面内容 - 默认隐藏非活动页面 */
    .page-content {
      display: none;
    }

    .page-content.active {
      display: block;
    }

    /* 公共样式 - 标题区域 */
    .section-header {
      padding: 25px 25px 20px;
      border-bottom: 1px solid #F0F0F0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: linear-gradient(135deg, #FAFAFA 0%, #F5F5F5 100%);
    }

    .section-title {
      font-size: 20px;
      font-weight: 600;
      color: #333;
      letter-spacing: 0.5px;
    }

    /* 编辑按钮样式 */
    .edit-btn {
      background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
      color: white;
      border: none;
      border-radius: 25px;
      padding: 10px 20px;
      font-size: 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
      transition: all 0.3s ease;
      box-shadow: 0 4px 15px rgba(33, 150, 243, 0.3);
      font-weight: 500;
    }

    .edit-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(33, 150, 243, 0.4);
    }

    .edit-icon {
      margin-right: 8px;
      font-size: 16px;
      font-weight: bold;
    }

    /* 基本信息页面样式 */
    .info-list {
      padding: 20px 25px;
    }

    .info-item {
      padding: 18px 0;
      border-bottom: 1px solid #F0F0F0;
      transition: background-color 0.2s ease;
    }

    .info-item:hover {
      background-color: rgba(33, 150, 243, 0.02);
      margin: 0 -25px;
      padding: 18px 25px;
      border-radius: 8px;
    }

    .info-item:last-child {
      border-bottom: none;
    }

    .info-label {
      font-size: 14px;
      color: #666;
      margin-bottom: 8px;
      font-weight: 500;
    }

    .info-value {
      font-size: 16px;
      color: #333;
      min-height: 24px;
      font-weight: 400;
      line-height: 1.5;
    }

    /* 契约·资产页面样式 */
    .asset-block {
      padding: 30px 25px;
      border-bottom: 1px solid #F0F0F0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: all 0.3s ease;
    }

    .asset-block:hover {
      background-color: rgba(33, 150, 243, 0.02);
      transform: translateX(5px);
    }

    .asset-block:last-child {
      border-bottom: none;
    }

    .block-title {
      font-size: 22px;
      font-weight: 600;
      color: #333;
      letter-spacing: 0.5px;
    }

    .asset-edit-btn {
      background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
      color: white;
      border: none;
      border-radius: 25px;
      padding: 12px 24px;
      font-size: 15px;
      cursor: pointer;
      display: flex;
      align-items: center;
      transition: all 0.3s ease;
      box-shadow: 0 4px 15px rgba(33, 150, 243, 0.3);
      font-weight: 500;
    }

    .asset-edit-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(33, 150, 243, 0.4);
    }

    /* 生命·意志页面样式 */
    .will-section-header {
      padding: 25px 25px 20px;
      border-bottom: 1px solid #F0F0F0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: linear-gradient(135deg, #FAFAFA 0%, #F5F5F5 100%);
    }

    .will-title {
      font-size: 20px;
      font-weight: 600;
      color: #333;
      letter-spacing: 0.5px;
    }

    .will-container {
      padding: 25px;
    }

    .will-field-list {
      display: flex;
      flex-direction: column;
      gap: 25px;
    }

    .will-field {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .will-label {
      font-size: 15px;
      color: #666;
      font-weight: 500;
    }

    .will-input {
      width: 100%;
      padding: 18px;
      border: 2px solid #E0E0E0;
      border-radius: 12px;
      font-size: 16px;
      color: #333;
      resize: vertical;
      min-height: 120px;
      line-height: 1.6;
      transition: all 0.3s ease;
      background-color: #FAFAFA;
    }

    .will-input:focus {
      outline: none;
      border-color: #2196F3;
      box-shadow: 0 0 0 4px rgba(33, 150, 243, 0.15);
      background-color: white;
      transform: translateY(-2px);
    }

    /* 计划页面样式 */
    .plan-container {
      padding: 25px;
    }

    .plan-card {
      border: 2px solid #E0E0E0;
      border-radius: 12px;
      padding: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: all 0.3s ease;
      background: linear-gradient(135deg, #FAFAFA 0%, #F5F5F5 100%);
    }

    .plan-card:hover {
      border-color: #2196F3;
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(33, 150, 243, 0.15);
    }

    .plan-label {
      background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
      color: white;
      padding: 8px 16px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 600;
      box-shadow: 0 4px 15px rgba(33, 150, 243, 0.3);
    }

    .plan-status {
      color: #666;
      font-size: 16px;
      display: flex;
      align-items: center;
      font-weight: 500;
    }

    .status-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #E0E0E0;
      margin-right: 10px;
      transition: all 0.3s ease;
    }

    .plan-card:hover .status-dot {
      background-color: #FF9800;
      box-shadow: 0 0 10px rgba(255, 152, 0, 0.5);
    }

    /* 备忘录页面样式 */
    .memo-container {
      padding: 25px;
    }

    .memo-input {
      width: 100%;
      min-height: 150px;
      border: 2px solid #E0E0E0;
      border-radius: 12px;
      padding: 20px;
      font-size: 16px;
      color: #333;
      resize: vertical;
      line-height: 1.6;
      transition: all 0.3s ease;
      background-color: #FAFAFA;
    }

    .memo-input:focus {
      outline: none;
      border-color: #2196F3;
      box-shadow: 0 0 0 4px rgba(33, 150, 243, 0.15);
      background-color: white;
      transform: translateY(-2px);
    }

    /* 底部标志 */
    .bottom-logo {
      position: fixed;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
      transition: all 0.3s ease;
    }

    .bottom-logo:hover {
      transform: translateX(-50%) scale(1.05);
    }

    .logo-icon {
      width: 85px;
      height: 85px;
      margin: 0 auto;
      filter: drop-shadow(0 4px 15px rgba(33, 150, 243, 0.3));
    }

    .logo-text {
      font-size: 13px;
      color: #666;
      margin-top: 8px;
      font-weight: 500;
      letter-spacing: 0.5px;
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
      .header {
        padding: 15px;
        min-height: 70px;
      }

      .user-name {
        font-size: 18px;
      }

      .nav-tab {
        padding: 12px 4px;
        font-size: 13px;
      }

      .content-container {
        margin: 0 10px 15px;
      }

      .section-header {
        padding: 20px 20px 15px;
      }

      .section-title {
        font-size: 18px;
      }

      .info-list,
      .will-container,
      .plan-container,
      .memo-container {
        padding: 20px;
      }

      .asset-block {
        padding: 25px 20px;
      }
    }
  </style>
</head>

<body>
  <!-- 顶部导航栏 -->
  <div class="header">
    <div>
      <div class="welcome-text">欢迎回来</div>
      <div class="user-name">郭东 先生</div>
    </div>
    <button class="menu-btn">
      菜单
      <div class="avatar">郭</div>
    </button>
  </div>

  <!-- 导航标签 -->
  <div class="nav-tabs">
    <a href="#basic-info" class="nav-tab active" data-page="basic-info-page">基本信息</a>
    <a href="#contract-asset" class="nav-tab" data-page="contract-asset-page">契约·资产</a>
    <a href="#life-will" class="nav-tab" data-page="life-will-page">生命·意愿</a>
    <a href="#plan" class="nav-tab" data-page="plan-page">计划</a>
    <a href="#memo" class="nav-tab" data-page="memo-page">备忘录</a>
  </div>

  <!-- 内容区域 -->
  <div class="content-container">
    <!-- 基本信息页面 -->
    <div id="basic-info-page" class="page-content active">
      <div class="section-header">
        <div class="section-title">基本信息</div>
        <button class="edit-btn" id="basic-info-edit">
          <span class="edit-icon">✎</span> 编辑
        </button>
      </div>

      <div class="info-list">
        <div class="info-item">
          <div class="info-label">姓名</div>
          <div class="info-value">郭东</div>
        </div>

        <div class="info-item">
          <div class="info-label">出生日期</div>
          <div class="info-value">2000年2月9日</div>
        </div>

        <div class="info-item">
          <div class="info-label">血型</div>
          <div class="info-value">A型</div>
        </div>

        <div class="info-item">
          <div class="info-label">住址</div>
          <div class="info-value">家</div>
        </div>

        <div class="info-item">
          <div class="info-label">电话号码</div>
          <div class="info-value">19918675948</div>
        </div>

        <div class="info-item">
          <div class="info-label">家庭构成</div>
          <div class="info-value"></div>
        </div>

        <div class="info-item">
          <div class="info-label">籍贯</div>
          <div class="info-value"></div>
        </div>

        <div class="info-item">
          <div class="info-label">宠物</div>
          <div class="info-value">无</div>
        </div>
      </div>
    </div>

    <!-- 契约·资产页面 -->
    <div id="contract-asset-page" class="page-content">
      <div class="asset-block">
        <div class="block-title">契约信息</div>
        <button class="asset-edit-btn" id="contract-edit">
          <span class="edit-icon">✎</span> 编辑
        </button>
      </div>

      <div class="asset-block">
        <div class="block-title">资产信息</div>
        <button class="asset-edit-btn" id="asset-edit">
          <span class="edit-icon">✎</span> 编辑
        </button>
      </div>
    </div>

    <!-- 生命·意愿页面 -->
    <div id="life-will-page" class="page-content">
      <div class="will-section-header">
        <div class="will-title">生命·意愿表明信息</div>
        <button class="edit-btn" id="will-edit">
          <span class="edit-icon">✎</span> 编辑
        </button>
      </div>

      <div class="will-container">
        <div class="will-field-list">
          <div class="will-field">
            <label class="will-label">意志表明</label>
            <textarea class="will-input" readonly>当判断为没有恢复希望时，不希望进行任何延长生命的治疗</textarea>
          </div>

          <div class="will-field">
            <label class="will-label">器官捐赠</label>
            <textarea class="will-input" readonly></textarea>
          </div>

          <div class="will-field">
            <label class="will-label">拥有决定权的人</label>
            <textarea class="will-input" readonly></textarea>
          </div>

          <div class="will-field">
            <label class="will-label">希望通知葬礼的人</label>
            <textarea class="will-input" readonly></textarea>
          </div>

          <div class="will-field">
            <label class="will-label">不希望通知葬礼的人</label>
            <textarea class="will-input" readonly></textarea>
          </div>

          <div class="will-field">
            <label class="will-label">墓地·神社</label>
            <textarea class="will-input" readonly></textarea>
          </div>
        </div>
      </div>
    </div>

    <!-- 计划页面 -->
    <div id="plan-page" class="page-content">
      <div class="section-header">
        <div class="section-title">计划</div>
        <button class="edit-btn" id="plan-edit">
          <span class="edit-icon">✎</span> 编辑
        </button>
      </div>

      <div class="plan-container">
        <div class="plan-card">
          <div class="plan-label">安全邮箱地址</div>
          <div class="plan-status">
            <span class="status-dot"></span> 未登录
          </div>
        </div>
      </div>
    </div>

    <!-- 备忘录页面 (已中文化) -->
    <div id="memo-page" class="page-content">
      <div class="section-header">
        <div class="section-title">备忘录</div>
        <button class="edit-btn" id="memo-edit">
          <span class="edit-icon">✎</span> 编辑
        </button>
      </div>

      <div class="memo-container">
        <textarea class="memo-input" placeholder="在此输入备忘录内容..." readonly></textarea>
      </div>
    </div>
  </div>

  <script>
    // 菜单按钮点击事件
    document.querySelector('.menu-btn').addEventListener('click', function () {
      window.location.href = '菜单对话框.html';
    });

    // 导航标签页切换功能
    document.querySelectorAll('.nav-tab').forEach(tab => {
      tab.addEventListener('click', function (e) {
        e.preventDefault();

        // 1. 切换导航标签激活状态
        document.querySelectorAll('.nav-tab').forEach(t => {
          t.classList.remove('active');
        });
        this.classList.add('active');

        // 2. 切换页面内容显示
        const targetPage = this.getAttribute('data-page');
        document.querySelectorAll('.page-content').forEach(page => {
          page.classList.remove('active');
        });
        document.getElementById(targetPage).classList.add('active');
      });
    });

    // 编辑按钮点击事件
    document.getElementById('basic-info-edit').addEventListener('click', function () {
      window.location.href = '基本信息编辑页.html';

    });

    document.getElementById('contract-edit').addEventListener('click', function () {
      window.location.href = '契约信息编辑页.html';
    });

    document.getElementById('asset-edit').addEventListener('click', function () {
      window.location.href = '资产信息编辑页.html';
    });

    document.getElementById('will-edit').addEventListener('click', function () {
      window.location.href = '生命意愿编辑页.html';
    });

    document.getElementById('plan-edit').addEventListener('click', function () {
      window.location.href = '计划编辑页.html';
    });

    // 备忘录页面编辑按钮
    document.getElementById('memo-edit').addEventListener('click', function () {
      window.location.href = '备忘录编辑页.html';
    });
  </script>
</body>

</html>